<template>
  <a-card :bordered='false'>
    <!-- 查询区域 -->
    <div class='table-page-search-wrapper'>
      <a-form layout='inline' @keyup.enter.native='searchQuery'>
        <a-row :gutter='24'>
          <a-col :xl='6' :lg='7' :md='8' :sm='24'>
            <a-form-item label='审核状态'>
              <j-dict-select-tag placeholder='请选择审核状态' v-model='queryParam.status' dictCode='audit_status' />
            </a-form-item>
          </a-col>
          <a-col :xl='6' :lg='7' :md='8' :sm='24'>
            <a-form-item label='申请人ID'>
              <a-input placeholder='请输入申请人ID' v-model='queryParam.userId'></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl='6' :lg='7' :md='8' :sm='24'>
            <a-form-item label='被举报人ID'>
              <a-input placeholder='请输入被举报人ID' v-model='queryParam.reportUserId'></a-input>
            </a-form-item>
          </a-col>

          <template v-if='toggleSearchStatus'>
            <a-col :xl='10' :lg='11' :md='12' :sm='24'>
              <a-form-item label='申请时间'>
                <j-date :show-time='true' date-format='YYYY-MM-DD HH:mm:ss' placeholder='请选择开始时间'
                        class='query-group-cust' v-model='queryParam.createTime_begin'></j-date>
                <span class='query-group-split-cust'></span>
                <j-date :show-time='true' date-format='YYYY-MM-DD HH:mm:ss' placeholder='请选择结束时间'
                        class='query-group-cust' v-model='queryParam.createTime_end'></j-date>
              </a-form-item>
            </a-col>
          </template>
          <a-col :xl='6' :lg='7' :md='8' :sm='24'>
            <span style='float: left;overflow: hidden;' class='table-page-search-submitButtons'>
              <a-button type='primary' @click='searchQuery' icon='search'>查询</a-button>
              <a-button type='primary' @click='searchReset' icon='reload' style='margin-left: 8px'>重置</a-button>
              <a @click='handleToggleSearch' style='margin-left: 8px'>
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->

    <!-- table区域-begin -->
    <div>

      <a-table
        ref='table'
        size='middle'
        :scroll='{x:true}'
        bordered
        rowKey='id'
        :columns='columns'
        :dataSource='dataSource'
        :pagination='ipagination'
        :loading='loading'
        :rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
        class='j-table-force-nowrap'
        @change='handleTableChange'>

        <template slot='statusSlot' slot-scope='text, record'>
          <div v-if="record.status === '1'" style='color: #169bd5'>{{ text }}</div>
          <div v-else-if="record.status === '2'" style='color: #000000'>{{ text }}</div>
          <div v-else style='color: red'>{{ text }}</div>
        </template>
        <template slot='fileSlot' slot-scope='text,record'>
          <a @click='() => viewFile(text)'>查看</a>
        </template>

        <span slot='action' slot-scope='text, record'>
          <span v-if="record.status=='1'">
            <a @click='openBanaccountModal(record)'>封号</a>
            <a-divider type='vertical' />
            <a @click='bianImMsg(record)'>禁言</a>
             <a-divider type='vertical' />
            <a @click='backMsg(record)'>回复</a>
            <a-divider type='vertical' />
            <a @click='dataAudit(record.id)'>拒绝通过</a>
          </span>

        </span>

      </a-table>
    </div>
    <ViewFileModel ref='ViewFileModel'></ViewFileModel>
    <BanaccountModal ref='BanaccountModal' @ok='modalFormOk'></BanaccountModal>
    <a-modal
      title='回复'
      :visible='backMsgV'
      @ok='backMsgOk'
      @cancel='backMsgV=false'
      cancelText='取消'
      okText='确定'
    >
      <a-textarea placeholder='请输入回复内容' v-model='report.backMsg' />
    </a-modal>
  </a-card>

</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import ViewFileModel from '@/views/xiny/common/ViewFileModel'
import BanaccountModal from '@/views/xiny/security/banaccount/modules/BanaccountModal'
import { getAction,postAction } from '@/api/manage'

export default {
  name: 'UserReportList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    ViewFileModel,
    BanaccountModal
  },
  data() {
    return {
      description: '用户举报记录管理页面',
      backMsgV: false,
      report: {},
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '申请人ID',
          align: 'center',
          dataIndex: 'userId'
        },
        {
          title: '申请人昵称',
          align: 'center',
          dataIndex: 'userName'
        },
        {
          title: '被举报人ID',
          align: 'center',
          dataIndex: 'reportUserId'
        },
        {
          title: '被举报人昵称',
          align: 'center',
          dataIndex: 'reportUserName'
        },

        {
          title: '举报原因',
          align: 'center',
          dataIndex: 'reportType'
        },
        {
          title: '补充说明',
          align: 'center',
          dataIndex: 'reportDetail'
        },
        {
          title: '文件地址',
          align: 'center',
          dataIndex: 'fileUrl',
          scopedSlots: { customRender: 'fileSlot' }
        },
        {
          title: '审核状态',
          align: 'center',
          dataIndex: 'status_dictText',
          scopedSlots: { customRender: 'statusSlot' }
        },
        {
          title: '申请时间',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/user/userReport/list'
      },
      dictOptions: {},
      superFieldList: []
    }
  },
  created() {
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    initDictConfig() {
    },

    //审核拒绝
    dataAudit(id) {
      this.loading = true
      getAction('/user/userReport/reportAudit', { id: id }).then(({ success, result, message }) => {
        if (success) {
          this.loadData()
          this.$message.success(message)
        } else {
          this.$message.warning(message)
        }
      }).finally(() => this.loading = false)
    },

    backMsg(obj) {
      this.backMsgV = true
      this.report = obj
    },
    backMsgOk() {
      console.log(this.report)
      postAction('/user/userReport/backMsg', this.report).then(({ success, result, message }) => {
        if (success) {
          this.loadData()
          this.$message.success(message)
        } else {
          this.$message.warning(message)
        }
      }).finally(() => this.backMsgV = false)
    },


    //封号
    openBanaccountModal(record) {
      var obj = {}
      obj.roomMsgId = record.id
      obj.womanName = record.reportUserName
      obj.womanId = record.reportUserId
      obj.whatType = '4'//4代表举报类型
      obj.type = '1'//1代表封号类型
      obj.createId = record.id//举报页面特有。拿来后台处理

      this.$refs.BanaccountModal.edit(obj)
      this.$refs.BanaccountModal.title = '封号'
      this.$refs.BanaccountModal.disableSubmit = false
    },

    //禁言
    bianImMsg(record) {
      var obj = {}
      obj.roomMsgId = record.id
      obj.womanName = record.reportUserName
      obj.womanId = record.reportUserId
      obj.whatType = '4'//4代表举报类型
      obj.type = '2'//2代表禁言类型
      obj.createId = record.id//举报页面特有。拿来后台处理

      this.$refs.BanaccountModal.edit(obj)
      this.$refs.BanaccountModal.title = '禁言'
      this.$refs.BanaccountModal.disableSubmit = false
    },
    //查看文件
    viewFile(fileUrl) {
      if (fileUrl) {
        this.$refs.ViewFileModel.fileUrl = fileUrl.split(',')
      }
      this.$refs.ViewFileModel.title = '查看文件'
      this.$refs.ViewFileModel.visible = true
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>